<template>
    <div class="app-container">
        <div class="navBar">
            <div class="logo"><img src="./assets/logo.jpg" alt="" style="height: 65px;"></div>
            <div class="tab-box">
                <ul class="tb-left">
                    <li id="Home" @click="stayHere(1)" class="active">首页</li>
                    <li id="About" @click="stayHere(2)">部门概况</li>
                    <li id="Duty" @click="stayHere(3)">职责范围</li>
                    <li id="Rule" @click="stayHere(4)">规章制度</li>
                    <li id="Contact" @click="stayHere(5)">联系我们</li>
                </ul>
            </div>
        </div>
        <div class="fullPage" ref="fullPage">
            <div class="sidebar">
                <ul>
                    <el-tooltip v-for="item in scrollItems" :key="item.id"
                                :content="item.name"
                                placement="left-start"
                    >
                        <li  @click="move(item.id)"
                             :class="item.id === fullpage.current? 'active':''"></li>
                    </el-tooltip>

                </ul>
            </div>
            <div
                class="fullPageContainer"
                ref="fullPageContainer"
                @mousewheel="mouseWheelHandle"
                @DOMMouseScroll="mouseWheelHandle"
            >
                <!--首页新闻-->
                <div class="section section-bg" style="padding:100px;">
                    <el-carousel height="500px" :autoplay="true" ref="toggle">
                        <el-carousel-item>
                            <div class="my-carousel">
                                <img src="./assets/news1.jpg" alt=""
                                     style="height: 400px; width: 600px;margin-right: 20px;">
                                <div style="height: 400px; width: 500px;">
                                    <h1 class="juzhong">
                                        武汉东站正式开通投用
                                    </h1>
                                    <p class="suoj">
                                        2022年8月12日，随着开往湖北黄冈的C5627次列车12日7时26分准点发出，武汉第四座大型铁路客运站——武汉东站正式开通投用。开通初期，该站每天安排开行33趟动车。
                                    </p>
                                    <p class="suoj">
                                        作为武石、武冈、武咸城际铁路始发终到站，武汉东站投用后，将在跨线路网中发挥重要作用，进一步优化武汉“1+8”都市圈城际铁路网络，实现圈内各个城市之间的快速联通，特别是加强武汉与鄂州、黄石、黄冈、咸宁的联系，形成以武汉为中心的“1小时通勤圈”。
                                    </p>
                                </div>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item>
                            <div class="my-carousel">
                                <img src="./assets/news2.jpg" alt=""
                                     style="height: 400px; width: 600px;margin-right: 20px;">
                                <div style="height: 400px; width: 500px;">
                                    <h1 class="juzhong">
                                        武大高速跨铁路立交桥六次“转身”实现双向连通
                                    </h1>
                                    <p class="suoj">
                                        历经1小时30分钟旋转，武汉至大悟高速公路(简称武大高速)跨铁路立交桥最后一联连续梁顺利对接到位，标志着国内首座同桥六转项目实现双向连通。
                                    </p>
                                    <p class="suoj">
                                        武大高速跨铁路立交桥跨越京广铁路上下行客运线及货运线、武汉北编组站、新港上行线等9条既有铁路营业线。“为了降低对既有铁路营业线的影响，
                                        项目部采用变截面梁转体施工工艺，即先平行于铁路进行梁体施工，再进行转体施工完成桥梁合龙。”武大高速跨铁路立交桥主桥桥墩均位于铁路营业线之间，项目先后分六次转体完成左、右线主桥合龙，这也是国内首次采用同桥六转。
                                    </p>
                                </div>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item>
                            <div class="my-carousel">
                                <img src="./assets/news3.jpg" alt=""
                                     style="height: 400px; width: 600px;margin-right: 20px;">
                                <div style="height: 400px; width: 500px;">
                                    <h1 class="juzhong">
                                        武汉北Ⅲ场扩能改造工程<br>顺利开通
                                    </h1>
                                    <p class="suoj">
                                        2022年6月30日下午4点，经过210分钟要点换装，武汉北III场扩能改造工程顺利开通。 </p>
                                    <p class="suoj">
                                        武汉北编组站作为“一带一路”和“长江经济带”的黄金连接点，服务中欧班列、铁水联运和路网经济，承担着全国各地的货车中转解编任务。公司武汉北III场扩能改造工程项目部施工内容包含增加下行系统5条股道及相关道岔
                                        14 组，新增股道挂网，以及新增股道引起的既有接触网改造，并结合站场扩建，对III场既有信号系统进行扩容改造。 </p>
                                </div>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item>
                            <div class="my-carousel">
                                <img src="./assets/news4.jpg" alt=""
                                     style="height: 400px; width: 600px;margin-right: 20px;">
                                <div style="height: 400px; width: 500px;">
                                    <h1 class="juzhong">
                                        麻安高速麻城东段跨<br>沪蓉高铁转体桥成功转体
                                    </h1>
                                    <p class="suoj">
                                        2021年111月17日凌晨1时19分
                                        麻安高速麻城东段跨沪蓉高铁转体桥
                                        顺利完成转体、精准就位
                                        项目实现全线贯通。 </p>
                                    <p class="suoj">
                                        麻安高速麻城东段是《国家公路网规划（2013-2030）》中G4213的重要组成部分，东连大广高速，西接麻武高速和麻安高速红安段，线路跨越举水河、G106国道、
                                        麻武铁路、沪蓉铁路，共有大、中桥14座，合同段内设置三个分离式互通，全长15.865 公里，建设工期36个月。
                                    </p>
                                    <p class="suoj">
                                        项目建成后，将有效改善麻武、大广以及麻安等高速公路之间的衔接转换，便利沿线人民群众出行，直接服务于沿线城镇及工业园区的发展，助推大别山革命老区振兴。
                                    </p>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="small-window">
                        <div class=" mr10" @click="pictureJump(0)">
                            <img src="./assets/news1.jpg" alt=""
                                 class="window-image"
                                 >
                        </div>
                        <div class=" mr10" @click="pictureJump(1)">
                            <img src="./assets/news2.jpg" alt=""
                                 class="window-image"
                                 >
                        </div>
                        <div class=" mr10" @click="pictureJump(2)">
                            <img src="./assets/news3.jpg" alt=""
                                 class="window-image"
                                 >
                        </div>
                        <div class=" mr10" @click="pictureJump(3)">
                            <img src="./assets/news4.jpg" alt=""
                                 class="window-image"
                                 >
                        </div>
                    </div>
                </div>
                <!--电子地图-->
                <div class="section section-map">
                    <div class="map-box">
                        <img src="./assets/map.jpg" alt=""
                             style="height: 600px; width: 1200px;margin-right: 20px; margin-top: 10px">
                    </div>
                </div>
                <!--综合信息-->
                <div class="section section-bg">
                    <el-row class="first-row">
                        <h1>综合信息</h1>
                    </el-row>
                    <el-row class="second-row">
                        <el-divider style="width: 80%"></el-divider>
                    </el-row>
                    <el-row class="third-row">
                        <div class="app-box" style="margin-top: 20px">
                            <el-card style="width: 450px;" class="notice-card card-opacity" >
                                <template #header>
                                    <div class="card-header">
                                        <span class="card-title">
                                            <img style="height: 25px; width: 25px; margin-right: 10px;" src="./assets/images/notice.png"/>
                                            通知公告
                                        </span>
                                        <el-button class="button" text>更多</el-button>
                                    </div>
                                </template>
                                <ul class="ulType">
                                    <li v-for="item in notices" :key="item" class="text">
                                        <span :title="item.news">
                                            <img style="height: 20px; width: 20px;" src="./assets/images/right.png" alt="">
                                            {{item.time}}{{item.news }}
                                        </span>
                                    </li>
                                </ul>
                            </el-card>
                            <el-card class="tongji-card card-opacity">
                                <template #header>
                                    <div class="card-header">
                                        <span class="card-title">
                                            <img style="height: 20px; width: 20px; margin-right: 10px;" src="./assets/images/legal.png"/>
                                            统计信息
                                        </span>
                                        <el-button class="button" text>更多</el-button>
                                    </div>
                                </template>
                                <div ref="chartOne" style="height: 300px; width: 400px; float: left;">

                                </div>
                                <div ref="chartTwo" style="height: 300px; width: 300px;float: left; margin-left: 30px;">

                                </div>
                            </el-card>
                        </div>
                    </el-row>

                </div>
                <!--党建工作-->
                <div class="section section-bg">
                    <el-row class="first-row">
                        <h1>党建工作</h1>
                    </el-row>
                    <el-row class="second-row">
                        <el-divider style="width: 80%"></el-divider>
                    </el-row>
                    <el-row class="third-row">
                        <div class="app-box" style="margin-top: 20px">
                            <el-card class="notice-card card-opacity" >
                                <template #header>
                                    <div class="card-header">
                                        <span class="card-title">
                                            <img style="height: 25px; width: 25px; margin-right: 10px;" src="./assets/images/lianzheng.png"/>
                                            党风廉政建设
                                        </span>
                                        <el-button class="button" text>更多</el-button>
                                    </div>
                                </template>
                                <ul class="ulType">
                                    <li v-for="item in dangOne" :key="item" class="text">
                                        <span :title="item.name">
                                            <img style="height: 20px; width: 20px;" src="./assets/images/right.png" alt="">
                                            {{item.name }}
                                        </span>
                                    </li>
                                </ul>
                            </el-card>
                            <el-card class="notice-card card-opacity" >
                                <template #header>
                                    <div class="card-header">
                                        <span class="card-title">
                                            <img style="height: 20px; width: 20px; margin-right: 10px;" src="./assets/images/study.png"/>
                                            政治理论学习
                                        </span>
                                        <el-button class="button" text>更多</el-button>
                                    </div>
                                </template>
                                <ul class="ulType">
                                    <li v-for="item in dangTwo" :key="item" class="text">
                                        <span :title="item.name">
                                            <img style="height: 20px; width: 20px;" src="./assets/images/right.png" alt="">
                                            {{item.name }}
                                        </span>
                                    </li>
                                </ul>
                            </el-card>
                            <el-card class="notice-card card-opacity" >
                                <template #header>
                                    <div class="card-header">
                                        <span class="card-title">
                                            <img style="height: 20px; width: 20px; margin-right: 10px;" src="./assets/images/zhibu.png"/>
                                            支部建设
                                        </span>
                                        <el-button class="button" text>更多</el-button>
                                    </div>
                                </template>
                                <ul class="ulType">
                                    <li v-for="item in dangThree" :key="item" class="text">
                                        <span :title="item.name">
                                            <img style="height: 20px; width: 20px;" src="./assets/images/right.png" alt="">
                                            {{item.name }}
                                        </span>
                                    </li>
                                </ul>
                            </el-card>

                        </div>
                    </el-row>
                </div>
                <!--常用应用-->
                <div class="section section-bg" style="position: relative;">
                    <el-row class="first-row">
                        <h1>常用应用</h1>
                    </el-row>
                    <el-row class="second-row">
                        <el-divider style="width: 80%"></el-divider>
                    </el-row>
                    <el-row class="third-row">
                        <div class="app-box">

                            <el-card :body-style="{ padding: '0px'}" class="card">
                                <img
                                    src="./assets/images/shigong.png"
                                    class="image"
                                />
                                <div class="app-name">
                                    施工审批系统
                                </div>
                            </el-card>
                            <el-card :body-style="{ padding: '0px'}" class="card">
                                <img
                                    src="./assets/images/jindu.png"
                                    class="image"
                                />
                                <div class="app-name">
                                    进度管理子系统
                                </div>
                            </el-card>
                            <el-card :body-style="{ padding: '0px'}" class="card">
                                <img
                                    src="./assets/images/touzi.png"
                                    class="image"
                                />
                                <div class="app-name">
                                    投资管理子系统
                                </div>
                            </el-card>

                        </div>
                    </el-row>
                    <div class="bottom-nav" >
                        <div class="link-box">
                            <select class="form-select form-select-sm link-select" aria-label=".form-select-sm example" >
                                <option selected>-----机关部门-----</option>
                                <option value="1">运输部</option>
                                <option value="2">客运部</option>
                                <option value="3">劳动与卫生部</option>
                                <option value="4">车辆部</option>
                                <option value="5">企业管理和法律事务部</option>
                            </select>
                            <select class="form-select form-select-sm link-select" aria-label=".form-select-sm example" >
                                <option selected>-----其他单位-----</option>
                                <option value="1">武汉新港江北铁路有限责任公司</option>
                                <option value="2">湖北长荆铁路有限责任公司</option>
                                <option value="3">湖北城际铁路有限责任公司</option>
                                <option value="4">漯阜铁路有限责任公司</option>
                                <option value="5">武九铁路客运专线湖北有限责任公司</option>
                            </select>
                            <select class="form-select form-select-sm link-select" aria-label=".form-select-sm example" >
                                <option selected>-----其他网站-----</option>
                                <option value="1">国铁集团办公网</option>
                                <option value="2">南昌局集团公司</option>
                                <option value="3">广州局集团公司</option>
                                <option value="4">兰州局集团公司</option>
                                <option value="5">呼和浩特局集团公司</option>
                            </select>
                        </div>
                        <p style="margin-top: 15px;"> Copyright © 2023
                            <span>版权所有：中国铁路武汉局集团有限公司建设部 </span>
                        </p>
                        <p>
                            地址：武汉市武昌区八一路2号   邮编：430071
                        </p>
                    </div>
                </div>
<!--                &lt;!&ndash;其他链接&ndash;&gt;-->
<!--                <div class="section section-bg" style="position: relative;">-->
<!--                    <el-row class="first-row">-->
<!--                        <h1>其他链接</h1>-->
<!--                    </el-row>-->
<!--                    <el-row class="second-row">-->
<!--                        <el-divider style="width: 80%"></el-divider>-->
<!--                    </el-row>-->
<!--                    <el-row class="third-row">-->
<!--                        <div class="app-box">-->


<!--                        </div>-->
<!--                        <div class="app-box">-->

<!--22-->
<!--                        </div>-->
<!--                    </el-row>-->

<!--                </div>-->
            </div>
        </div>
    </div>

</template>

<script setup name="App">
import {ref, onMounted} from 'vue'
import {getCurrentInstance} from '@vue/runtime-core'
import * as echarts from 'echarts'
const chartOne = ref(null)
const chartTwo = ref(null)
onMounted(()=>{

  var chart1 = echarts.init(chartOne.value);
  var chart2 = echarts.init(chartTwo.value);
    chart1.setOption({
      title: {
          text: '投资计划',

      },
      tooltip: {
          trigger: 'axis'
      },
      legend: {
          data: ['计划量','完成量']
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022']
      },
      yAxis: {
          type: 'value',
          axisLabel: {
              formatter: '{value} 万'
          }
      },
      series: [
          {
              name: '计划量',
              type: 'line',
              data: [1312, 1000, 1010, 1204, 1300, 1400, 1320]
          },
          {
              name: '完成量',
              type: 'line',
              data: [1312, 932, 901, 934, 1290, 1330, 1320]
          }
      ]
  });
    chart2.setOption({
        title: {
            text: '项目进度',

            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {

                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 50, name: '前期' },
                    { value: 12, name: '施工准备' },
                    { value: 20, name: '在建' },
                    { value: 10, name: '收尾' },
                ]
            }
        ]
    });
})

const {proxy} = getCurrentInstance()
const fullpage = ref({
  current: 1, // 当前的页面编号
  isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
  deltaY: 0 // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
})

// 整屏提示
const scrollItems = ref([
  {
    id:1,
    name:"建设风采"
  },
  {
    id:2,
    name:"电子地图"
  },
  {
    id:3,
    name:"综合信息"
  },
  {
    id:4,
    name:"党建工作"
  },
  {
    id:5,
    name:"常用应用"
  }
])
// 通知公告
const notices = ref([
  {
    news:'关于组织国道107绕城遂平段改进工程下穿精光高铁等涉铁工程现场踏勘的通知',
    time:'02-13 14:20 '
  },
  {
    news:'关于召开宜万线金子山隧道、襄渝线白云山隧道病毒整治推进会的通知',
    time:'02-13 14:20 '
  },
  {
    news:'关于召开S124江夏区省道金五线乌龙泉立交桥加固改造工程技术交底及施工协调会议的通知',
    time:'02-13 14:20 '
  },{
    news:'关于组织荆门市杨冲路东段管网下穿焦柳铁路等涉铁工程项目设计评审的通知',
    time:'02-13 14:20 '
  },{
    news:'关于组织召开浩吉铁路泮春、三口、跨马站施工图设计审查会的通知',
    time:'02-13 14:20 '
  }
])
// 文件汇编
// const docs = ref([
//   {
//     name:'中国铁路武汉局集团有限公司旅乘客降所客运组织管理办法',
//     time:'02-13 14:20 '
//   },
//   {
//     name:'集团公司党委组织部关于规范违纪违规问题专题组织生活会的指导意见',
//     time:'02-13 14:20 '
//   },
//   {
//     name:'铁路建设项目标准化管理指导意见',
//     time:'02-13 14:20 '
//   },{
//     name:'中国铁路武汉局集团有限公司铁路建设管理办法',
//     time:'02-13 14:20 '
//   },{
//     name:'中国铁路武汉局集团有限公司建设部关于加强技术改造及涉铁项目开工标准化管理的通知',
//     time:'02-13 14:20 '
//   }
// ])
//规章制度
// const legals = ref([
//   {
//     name:'建设部设备大修项目管理实施细则',
//     time:'02-13 14:20 '
//   },
//   {
//     name:'关于规范特种设备、消防设备维保和天燃气报警装置定期检测更换的通知',
//     time:'02-13 14:20 '
//   },
//   {
//     name:'中华人民共和国安全生产法（主席令第13号）',
//     time:'02-13 14:20 '
//   },{
//     name:'中华人民共和国道路交通安全法（主席令第47号）',
//     time:'02-13 14:20 '
//   },{
//     name:'中华人民共和国突发事件应对法（主席令第69号）',
//     time:'02-13 14:20 '
//   }
// ])
//党风廉政建设
const dangOne = ref([
  {
    name:'中秋国庆期间违反中央八项规定精神问题监督举报曝光专区',
    time:'02-13 14:20 '
  },
  {
    name:'各级纪检监察机关查处12起群众身边的腐败和作风问题',
    time:'02-13 14:20 '
  },
  {
    name:'武汉铁路局建设部廉政风险防控办法',
    time:'02-13 14:20 '
  },{
    name:'武汉局集团党委关于开展党风廉政建设集中警示教育的通知',
    time:'02-13 14:20 '
  },{
    name:'关于开展纪律处分决定执行情况专项检查的通知',
    time:'02-13 14:20 '
  }
])
//政治理论学习
const dangTwo = ref([
  {
    name:'习近平总书记在庆祝中国共产主义青年团成立100周年的讲话',
    time:'02-13 14:20 '
  },
  {
    name:'进一步加强党员干部政治理论学习的实施方案',
    time:'02-13 14:20 '
  },
  {
    name:'关于进一步加强机关干部政治理论学习的通知',
    time:'02-13 14:20 '
  },{
    name:'武汉局集团公司建设部2023年党委理论学习中心组学习计划',
    time:'02-13 14:20 '
  },{
    name:'《求是》杂志发表习近平总书记重要文章《坚持和发展中国特色社会主义要一以贯之》',
    time:'02-13 14:20 '
  }
])
//党支部
const dangThree = ref([
  {
    name:'关于2023年建设部全体职工干部第1次集中学习内容的通知',
    time:'02-13 14:20 '
  },
  {
    name:'加强党支部建设、发挥党支部主体作用研究',
    time:'02-13 14:20 '
  },
  {
    name:'立足“七个有力”,加强基层党支部建设',
    time:'02-13 14:20 '
  },{
    name:'抓好“四强”党支部建设、推动新时代机关党建高质量发展',
    time:'02-13 14:20 '
  },{
    name:'以提升组织力为重点、加强机关党支部建设',
    time:'02-13 14:20 '
  }
])


function next() { // 往下切换
  let len = 5; // 页面的个数
  if (fullpage.value.current + 1 <= len) { // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
    fullpage.value.current += 1; // 页面+1
    move(fullpage.value.current); // 执行切换
  }
}

function pre() {// 往上切换
  if (fullpage.value.current - 1 > 0) { // 如果当前页面编号-1 大于0，则可以执行向下滑动
    fullpage.value.current -= 1;// 页面+1
    move(fullpage.value.current);// 执行切换
  }
}

function move(index) {
  console.log(index)
  fullpage.value.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
  directToMove(index); //执行滚动
  setTimeout(() => {  //这里的动画是1s执行完，使用setTimeout延迟1s后解锁
    fullpage.value.isScrolling = false;
  }, 1010);
}

function stayHere(index) {
  let nodeList = document.querySelectorAll(".tb-left li");
  nodeList.forEach(item => {
    item.classList.remove('active')
  })
  if (index === 1) {
    let element = document.querySelector('#Home');
    console.log(element)
    element.classList.add('active')
  }
  if (index === 2) {
    let element = document.querySelector('#About');
    element.classList.add('active')
  }
  if (index === 3) {
    let element = document.querySelector('#Duty');
    element.classList.add('active')
  }
  if (index === 4) {
    let element = document.querySelector('#Rule');
    element.classList.add('active')
  }
  if (index === 5) {
    let element = document.querySelector('#Contact');
    element.classList.add('active')
  }
}

function directToMove(index) {
  let height = proxy.$refs["fullPage"].clientHeight; //获取屏幕的宽度
  let scrollPage = proxy.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
  let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
  scrollHeight = -(index - 1) * height + "px";
  scrollPage.style.transform = `translateY(${scrollHeight})`;
  fullpage.value.current = index;
}

function mouseWheelHandle(event) { // 监听鼠标监听

  let evt = event || window.event;      // 添加冒泡阻止
  if (evt.stopPropagation) {
    evt.stopPropagation();
  } else {
    evt.returnValue = false;
  }
  if (fullpage.value.isScrolling) { // 判断是否可以滚动
    return false;
  }
  let e = event.originalEvent || event;
  fullpage.value.deltaY = e.deltaY || e.detail; // Firefox使用detail
  if (fullpage.value.deltaY > 0) {
    next();
  } else if (fullpage.value.deltaY < 0) {
    pre();
  }
}

function pictureJump(index) {
  proxy.$refs["toggle"].setActiveItem(index)
}


</script>
<style lang="scss">

.fullPage {
    height: 100%; //一定要设置，保证占满
    overflow: hidden; //一定要设置，多余的先隐藏
}

.fullPageContainer {
    width: 100%;
    height: 100%;
    transition: all linear 0.5s;
}

.section {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.section-bg {
    background-image: url("./assets/bg.png");
    background-size:100% 100%;
    padding-top: 100px;
}
.section-map {
    background-color: rgb(238,239,233);
    padding-top: 100px;
}


.navBar {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    z-index: 400;
    transition: height .3s ease;
    background-color: white;

}

.app-container {
    height: 100%;
    position: relative;
}

.tab-box {
    width: 100%;
    display: flex;
    padding: 0 70px;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.tb-left {
    display: flex;
    padding-left: 90px;
}

.tb-left li {
    position: relative;

    margin: 20px 25px 0 0;
    height: 30px;
    padding: 0 20px;
    line-height: 30px;
    border-radius: 20px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.my-carousel {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>
